<template>
  <div>
    <!--找回密码-->
    <div class="findpwd-title">{{$t('message.findPwd')}}</div>
  	<!--手机号码输入框-->
    <div class="clearfix">
      <div class="phone-area-code">
        <div class="phone-area-code-content" @click.stop="toggleAreaCode">
         + {{ checkAreaCode }}
        </div>
        <ul class="phone-area-code-list" v-if="isAreaCodeShow">
          <li v-for="(item, index) in areaCodeList" @click="selectCode(index)" :key="index">+ {{item}}</li>
        </ul>
      </div>
      <div class="phone-number">
        <input type="text" v-model.trim="phone" :class="{ 'input-error': phoneErrorText }" autofocus="autofocus" :placeholder="$t('message.findPwdPhoneHolder')" />
      </div>
    </div>
    <div class="error-tips" v-if="phoneErrorText">{{ phoneErrorText }}</div>
    <!--验证码-->
    <div class="code-group clearfix">
      <input type="text" v-model.trim="code" :class="{ 'input-error': codeErrorTxt }" :placeholder="$t('message.findPwdCodeHolder')" />
      <div class="code-button">
        <v-code-button :status="btnStatus" @click-button="getCode"></v-code-button>
      </div>
    </div>
    <div class="error-tips" v-if="codeErrorTxt">
      <span>{{ codeErrorTxt }}</span>
    </div>
    <!--下一步-->
    <button type="button" class="btn btn-orange" @click="next"><span :class="{ 'btn-loading': isLoading }">{{$t('message.next')}}</span></button>
  </div>
</template>

<script>
import VCodeButton from '@/components/base/VCodeButton'

export default {
  name: 'FindPasswordFirst',
  components: {
    VCodeButton
  },
  data () {
    return {
      checkAreaCode: '',
      areaCodeList: ['66'],
      isAreaCodeShow: false,
      phone: '',
      phoneStatus: 0,
      code: '',
      codeStatus: 0,
      btnStatus: 0,
      isLoading: false
    }
  },
  computed: {
    sendPhoneNumber () {
      return this.checkAreaCode + this.phone
    },
    phoneErrorText () {
      switch (this.phoneStatus) {
        case 0:
          return ''
        case 1:
          return ''
        case 2:
          return this.$t('message.phoneErr')
        case 3:
          return this.$t('message.messageSendFail')
        case 4:
          return this.$t('message.messageNotOpen')
        case 5:
          return this.$t('message.codeError4')
        case 6:
          return this.$t('message.messageSendSoMuch')
        case 7:
          return this.$t('message.lockOrDelete')
      }
    },
    codeErrorTxt () {
      switch (this.codeStatus) {
        case 0:
          return ''
        case 1:
          return ''
        case 2:
          return this.$t('message.codeError')
        case 3:
          return this.$t('message.codeNoEmpty')
      }
    }
  },
  watch: {
    phone (val) {
      clearTimeout(this.phoneTimer)
      this.phoneTimer = setTimeout(() => {
        if (!/^[0][689]\d{8}$/.test(val)) {
          this.phoneStatus = 2
        } else {
          this.phoneStatus = 1
        }
      }, 800)
    },
    code (val) {
      clearTimeout(this.codeTimer)
      this.codeTimer = setTimeout(() => {
        if (val === '') {
          this.codeStatus = 0
        } else if (val.length !== 6) {
          this.codeStatus = 2
        } else {
          this.codeStatus = 1
        }
      }, 800)
    }
  },
  methods: {
    toggleAreaCode () {
      this.isAreaCodeShow = !this.isAreaCodeShow
    },
    selectCode (index) {
      this.isAreaCodeShow = false
      this.checkAreaCode = this.areaCodeList[index]
    },
    getCode () {
      if (this.phoneStatus !== 1) return
      this.btnStatus = 1
      this.$ajax.findPwd(this.sendPhoneNumber).then((res) => {
        if (res.code === 200) {
          this.btnStatus = 2
        } else if (res.code === 202) {
          this.phoneStatus = 3
          this.btnStatus = 0
        } else if (res.code === 301) {
          this.phoneStatus = 4
          this.btnStatus = 0
        } else if (res.code === 305) {
          this.phoneStatus = 2
          this.btnStatus = 0
        } else if (res.code === 309) {
          this.phoneStatus = 5
          this.btnStatus = 0
        } else if (res.code === 311) {
          this.phoneStatus = 6
          this.btnStatus = 2
        } else if (res.code === 307) {
          this.phoneStatus = 7
          this.btnStatus = 0
        }
      }).catch(() => {
        this.btnStatus = 0
        this.$store.commit('alert', {
          switch: true
        })
      })
    },
    next () {
      if (this.isLoading) {
        return
      }
      if (this.phone === '') {
        this.phoneStatus = 2
      }
      if (this.code === '') {
        this.codeStatus = 3
      }
      if (this.phoneStatus === 1 && this.codeStatus === 1) {
        this.isLoading = true
        this.$ajax.ValidateInfo(this.sendPhoneNumber, this.code).then((res) => {
          this.isLoading = false
          if (res.code === 200) {
            this.$router.push({ path: 'second?phone=' + this.sendPhoneNumber + '&code=' + this.code })
          } else if (res.code === 201) {
            this.codeStatus = 2
          }
        }).catch(() => {
          this.isLoading = false
          this.$store.commit('alert', {
            switch: true
          })
        })
      }
    }
  },
  created () {
    this.checkAreaCode = this.areaCodeList[0]
    document.addEventListener('click', (e) => {
      this.isAreaCodeShow = false
    })
  }
}
</script>

<style scoped>
.findpwd-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 60px;
}

.phone-area-code {
  float: left;
  width: 90px;
  text-align: center;
  cursor: pointer;
  position: relative;
}

.phone-area-code-content {
  width: 90px;
  height: 48px;
  line-height: 48px;
  padding-right: 15px;
  border: 1px solid #d7d7d7;
  box-sizing: border-box;
  border-right: 0;
  position: relative;
}

.phone-area-code-content:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 6px solid #333;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -3px;
}

.phone-area-code-list {
  width: 89px;
  border: 1px solid #d7d7d7;
  border-top: 0;
  background: #fff;
  position: absolute;
  top: 100%;
  left: 0;
}

.phone-area-code-list li {
  line-height: 30px;
  padding-right: 15px;
}

.phone-area-code-list li:hover {
  color: #fff;
  background: #1e90ff;
}

.phone-number {
  float: left;
  width: 286px;
  height: 48px;
}

.phone-number > input {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  border: 1px solid #D7D7D7;
  padding: 0 16px;
}

.code-group {
  margin-top: 24px;
}

.code-group input {
  float: left;
  width: 230px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #d7d7d7;
  color: #666;
  border-radius: 2px;
  box-sizing: border-box;
}

.code-button {
  float: right;
  width: 110px;
  height: 48px;
}

.btn {
  width: 376px;
  height: 48px;
  font-size: 16px;
  border-radius: 2px;
  margin-top: 50px;
}
</style>